<template>
  <div id="zoomAreaContainer">
    <SketchRule
        :thick="thick"
        :scale="scale"
        :width="width"
        :height="height"
        :startX="startX"
        :startY="startY"
        :shadow="shadow"
        :horLineArr="lines.h"
        :verLineArr="lines.v"
        :cornerActive="true"
        :palette="{
          bgColor: '#333333',
          longfgColor: '#C8CDD0',
          shortfgColor: '#C8CDD0',
          fontColor: '#f5f5f5',
          shadowColor: 'rgb(255, 255, 255, 0)',
          lineColor: '#42a5f5',
          borderColor: '#616161'
        }"
        @handleLine="handleLine"
        @onCornerClick="handleCornerClick">
    </SketchRule>
    <div id="zoomArea"
         ref="screensRef"
         @scroll="handleScroll" @click.stop="zoomAreaClickHandler">
      <div ref="containerRef"
           :style="{
             position: 'absolute',
             width: layout.layoutConfigData.widthPixelUnit == '%' ? `${layout.layoutConfigData.width}%` : `${layout.layoutConfigData.width + 100}px`,
             height: layout.layoutConfigData.heightPixelUnit == '%' ? `${layout.layoutConfigData.height}%` : `${layout.layoutConfigData.height + 100}px`,
           }" @contextmenu.stop="onContainerRefRightClickHandler">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import SketchRule from "./ruler/sketchRuler";

import {createHelpers} from 'vuex-map-fields';

const {mapFields} = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});

export default {
  name: 'ZoomArea',
  components: {
    SketchRule
  },
  props: {
    scaleValue: {
      type: Number
    }
  },
  data() {
    return {
      scale: this.scaleValue,
      startX: 0,
      startY: 0,
      lines: {
        h: [],
        v: []
      },
      tmpLines: {

      },
      thick: 20,
      width: 0,
      height: 0,
      isShowRuler: true,
      isShowReferLine: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initRulerSize();
      this.handleScroll();
      this.initRulerGuides();
    });
  },
  methods: {
    initRulerSize() {
      const wrapperRect = document
          .querySelector("#zoomAreaContainer")
          .getBoundingClientRect();
      this.width = wrapperRect.width - 21;
      this.height = wrapperRect.height - 21;
    },
    /**
     * 初始化当前编辑页面参考线
     */
    initRulerGuides() {
      let currentPageId = this.pageMetadata.id;
      let pageLinesData = this.$store.getters['designer/getPageLinesData'];
      if (pageLinesData[currentPageId]) {
        this.lines = pageLinesData[currentPageId]
      }else {
        this.lines = {h: [], v: []}
      }
    },
    handleLine(lines) {
      let currentPageId = this.pageMetadata.id;
      let pageLinesData = this.$store.getters['designer/getPageLinesData'];
      pageLinesData[currentPageId] = lines;
      this.$store.commit('designer/setPageLinesData', pageLinesData);
      this.lines = lines
    },
    /**
     * 清空所有参考线
     */
    clearAllLines() {
      let currentPageId = this.pageMetadata.id;
      this.lines = {
        h: [],
        v: []
      }
      let pageLinesData = this.$store.getters['designer/getPageLinesData'];
      if (pageLinesData[currentPageId]) {
        pageLinesData[currentPageId] = this.lines;
        this.$store.commit('designer/setPageLinesData', pageLinesData);
      }
    },
    handleCornerClick(enabled) {
      if (enabled) {
        this.tmpLines = this.$PnUtil.deepClone(this.lines);
        this.lines = {
          h: [],
          v: []
        }
      }else {
        this.lines = this.tmpLines
      }
      return;
    },
    handleScroll() {
      const screensRect = document
          .querySelector("#zoomArea")
          .getBoundingClientRect();
      const canvasRect = document
          .querySelector("#AbsoluteLayout")
          .getBoundingClientRect();
      // 标尺开始的刻度
      const startX = (screensRect.left + this.thick - canvasRect.left) / this.scale;
      const startY = (screensRect.top + this.thick - canvasRect.top) / this.scale;
      this.startX = startX >> 0;
      this.startY = startY >> 0;
    },
    zoomAreaClickHandler() {
      this.$emit('onZoomAreaClick')
    },
    onContainerRefRightClickHandler (e) {
      e.preventDefault();
      this.$EventBus.$emit('pn_showLayoutCanvasContextmenu', e)
    }
  },
  computed: {
    ...mapFields({
      pageMetadata: 'pageMetadata',
      layout: 'pageMetadata.layout',
      structureTreeSidebarCollapsed: 'structureTreeSidebarCollapsed',
      componentLibrarySidebarCollapsed: 'componentLibrarySidebarCollapsed',
      rightSidebarCollapsed: 'rightSidebarCollapsed',
      zoomValue: 'zoomValue'
    }),
    shadow() {
      return {
        x: 0,
        y: 0,
        width: this.layout.layoutConfigData.width,
        height: this.layout.layoutConfigData.height
      }
    },
  },
  watch: {
    'pageMetadata.id': {
      handler: function () {
        this.initRulerGuides()
      }
    },
    'zoomValue': {
      handler: function (val) {
        this.scale = this.zoomValue;

        this.$nextTick(() => {
          this.handleScroll();
        });
      }
    },
    'layout.layoutConfigData.width': {
      handler: function () {
        this.$nextTick(() => {
          this.initRulerSize();
          this.handleScroll()
        });
      }
    },
    'layout.layoutConfigData.widthPixelUnit': {
      handler: function () {
        this.$nextTick(() => {
          this.initRulerSize();
          this.handleScroll()
        });
      }
    },
    'layout.layoutConfigData.height': {
      handler: function () {
        this.$nextTick(() => {
          this.initRulerSize();
          this.handleScroll()
        });
      }
    },
    'layout.layoutConfigData.heightPixelUnit': {
      handler: function () {
        this.$nextTick(() => {
          this.initRulerSize();
          this.handleScroll()
        });
      }
    },
    'structureTreeSidebarCollapsed': {
      handler: function () {
        setTimeout(() => {
          this.initRulerSize();
          this.handleScroll()
        }, 500)
      }
    },
    'componentLibrarySidebarCollapsed': {
      handler: function () {
        setTimeout(() => {
          this.initRulerSize();
          this.handleScroll()
        }, 500)
      }
    },
    'rightSidebarCollapsed': {
      handler: function () {
        setTimeout(() => {
          this.initRulerSize();
          this.handleScroll()
        }, 500)
      }
    },
  }
}
</script>

<style scoped>
#zoomAreaContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

#zoomArea {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>
